<template>
  <div class="set-box">
    <div class="mine-settings" v-if="sourceForm">
      <ul>
        <li class="van-hairline--bottom" @click="$router.push('/user/noDisturb')">
          <p>勿扰模式</p>
          <span class="iconfont icon-arrow"></span>
        </li>

        <li class="van-hairline--bottom" @click="$router.push('/user/reply')">
          <p>欢迎语</p>
          <span class="iconfont icon-arrow"></span>
        </li>

        <div class="split-line"></div>

        <li class="van-hairline--bottom" v-for="item in switchList" :key="item.id">
          <p>{{item.name}}</p>
          <van-switch v-model="item.value" @change="switchChange(item)" size="25px" />
        </li>

        <div class="msg-tips">*客户访问商品或联系您时，系统将默认给您推送。</div>

        <li class="van-hairline--bottom" @click="toFeedback">
          <p>意见反馈</p>
          <span class="iconfont icon-arrow"></span>
        </li>
      </ul>
    </div>
    <div class="wx-set" v-else>
      <div class="set-cnt">
        <p class="title">热门文章推送</p>
        <van-switch v-model="wxPush" @change="pushChange" size="25px" />
      </div>
      <div class="tips">
        <p>* 8:30上班提醒：实事头条；</p>
        <p>* 11:30热文更新：10万+；</p>
        <p>* 20:00晚安：行业资讯；</p>
        <p>* 22:00晚安播报：心灵鸡汤；</p>
      </div>
    </div>
  </div>
</template>
<script>
import userService from 'SERVICE/userService'
import commonService from 'SERVICE/commonService'

import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      switchList: {
        ai: {
          name: 'AI客服',
          value: true,
          id: 'aiFlag'
        },
        linker: {
          name: '楼盘动态',
          value: true,
          id: 'linkerDynamicFlag'
        },
        article: {
          name: '文章动态',
          value: true,
          id: 'articleDynamicFlag'
        },
        card: {
          name: '名片动态',
          value: true,
          id: 'cardDynamicFlag'
        }
      },
      wxPush: false,
      sourceForm: ''
    }
  },

  computed: {
    ...mapGetters(['userInfo'])
  },

  created() {
    let userLoginType = sessionStorage.getItem('userLoginType') || this.userInfo.userLoginType || 1
    this.sourceForm = userLoginType == 1
    this.getUserInfo()
  },

  methods: {
    async getUserInfo() {
      /** 设置switch初始状态 */
      const response = await userService.getUserInfo({ agentId: this.userInfo.agentId })
      this.switchList.ai.value = response.aiFlag == 1
      this.switchList.linker.value = response.linkerDynamicFlag == 1
      this.switchList.article.value = response.articleDynamicFlag == 1
      this.switchList.card.value = response.cardDynamicFlag == 1
      this.wxPush = response.articlePushFlag == 1
    },

    /** 更改各个switch状态 */
    async switchChange(item) {
      const params = { [item.id]: item.value ? 1 : 0 }

      try {
        await commonService.updateUserExpandInfo(params)
        this.$store.dispatch('getUserInfo', {
          ...this.userInfo,
          ...params
        })
      } catch (error) {}
    },

    toFeedback() {
      window.location = 'https://support.qq.com/product/31776'
    },
    // 微信公众号推送
    pushChange() {
      let status = this.wxPush ? 1 : 0
      commonService.updateUserExpandInfo({ articlePushFlag: status })
      this.$store.dispatch('getUserInfo', {
        ...this.userInfo,
        ...{ articlePushFlag: status }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.mine-settings {
  background: #f7f9fa;
  min-height: 100vh;
  ul {
    background: #fff;
  }
  li {
    height: 52px;
    padding-right: 16px;
    margin-left: 16px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    color: rgba(41, 46, 51, 1);
    .iconfont {
      color: #c2c7cc;
    }
  }
  .split-line {
    border-bottom: 12px solid #f7f9fa;
  }
  .msg-tips {
    height: 53px;
    box-sizing: border-box;
    background-color: #f7f9fa;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    padding-top: 12px;
    padding-left: 16px;
  }
}
.wx-set {
  height: 100%;
  background-color: #f7f9fa;
  font-size: 12px;
  .set-cnt {
    background-color: #fff;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      font-size: 14px;
    }
  }
  .tips {
    padding: 12px 16px;
    p {
      line-height: 1.5;
      color: #9ca5b5;
    }
  }
}
</style>